<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UploadiFive Test</title>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script src="tool.js" type="text/javascript"></script>
<!-- <script src="upload_helper.js" type="text/javascript"></script> -->

<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
body {
  font: 13px Arial, Helvetica, Sans-serif;
}

#main{
    float: left;
    margin-right: 10px;
}



.abs{
    position: absolute;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    color: #fff;
    line-height: 24px;
    padding: 10px 20px;
}

span.cr{
    color: #ed7a7a;
}

span.cg{
    color: #51c751;
}
</style>
</head>

<body style="padding:10px;">
    <div class="abs">
        <h5>配置详情</h5>
        <p>1.页面需要引入的css:uploadify.css,jquery-ui.min.css</p>
        <p>2.页面需要引入的js:jquery.uploadify.min.js,jquery-ui.min.js,tool.js</p>
        <p>3.用法:</p>
        <p>上传：配置option参数对象，$('#main').imageLoader(option);</p>
        <p>序列：配置类型参数，$('#main').getFileList('name');返回的即为文件序列<span class="cr">name为需要选择的类型，可选name/path（返回名称/地址）</span>;</p>
        <p>4.参数配置:</p>
        <p>
            var option = {<br/>
                'file':'#file_upload',<span class="cr">//上传绑定文件组件,调用上传时必填</span><br/>
                'text':'上传文本',<span class="cg">//上传按钮文字,默认'点击上传'</span><br/>
                'swf':'uploadify.swf',<span class="cr">//上传swf地址,必填,正式部署后可以改成固定url地址</span><br/>
                'uri':'http://192.168.1.119:8080/zdemo',<span class="cr">//路径补全,不写无法返回完整路径,并且会自动拼装上传ajax路径需要,ajax路径为uri地址+'file/upload.ajax'必填</span><br/> 'ajax':'file/upload.ajax',<span class="cr">//上传ajax方法</span><br/>             
                'drag':true,<span class="cg">//是否启用拖动,默认true,不建议关闭</span><br/>
                'float':'left'<span class="cg">//元素浮动,默认为左浮动</span><br/>
                'max':999<span class="cg">//上传数量,默认999</span><br/>
                'formData':json<span class="cg">//上传参数,默认null对象,格式{'folder':'article','tag':'new'}</span><br/>
                'ftype':'*.*'<span class="cg">//上传类型限定,默认*.*</span><br/>
                'data':json<span class="cg">//始化数据,编辑时用,默认为空,格式'{"names":"测试1.doc,测试2.ppt","paths":"/temp/a.doc,/temp/b.ppt"}'</span><br/>
            };            
        </p>
    </div>
    <!-- <form> -->
        <div id="queue"></div>
        <input id="file_upload0" name="file_upload0" type="file" multiple="true"/>

        <div id="main0" style="width:500px;"></div>
        <div><a href="javascript:;" id="showList">显示序列</a></div>


        <input id="file_upload1" name="file_upload0" type="file" multiple="true"/>

        <div id="main1" style="width:500px;"></div>
    <!-- </form> -->

  <script type="text/javascript">

    $(function() {
        var names = '',
            paths = '';
        var d = {};
        d.names = names;
        d.paths = paths;

        var option0 = {
            'file':'#file_upload0',
            'uri':'http://192.168.1.119:8080/zdemo',
            'ajax':'/file/upload.ajax',
            'formData':{'folder':'article','tag':'new'},
            data:d
        };

        var option1 = {
            'file':'#file_upload1',
            'uri':'http://192.168.1.119:8080/zdemo',
            'ajax':'/file/upload.ajax',
            'formData':{'folder':'article','tag':'new'},
            data:d
        };

        //上传
        var x0 = $('#main0').fileLoader(option0);
        var x1 = $('#main1').fileLoader(option1);

        //获取序列
        $('#showList').click(function(){
            alert($('#main').getFileList('path'));
        });
        //alert(findType('ppt'))
        //console.log(findLast('xxxx.xlsx'))
    });
  </script>
</body>
</html>